<template>
    <div class="search">
        <img
            src="../../assets/image/fagndajing.png"
            alt="fdj"
            @click="search"
        />
        <input
            type="text"
            placeholder="请输入内容"
            @keyup.enter="search"
            v-model="inputVal"
        />
    </div>
</template>

<script>
import request from "@/request/request";
import { handleMusicTime } from "@/utils/utils";

export default {
    data() {
        return {
            inputVal: ""
        };
    },
    methods: {
        async search() {
            request(`/cloudsearch?keywords=${this.inputVal}&offset=0`).then(
                res => {
                    res.data.result.songs.forEach((item, index) => {
                        res.data.result.songs[index].dt = handleMusicTime(
                            item.dt
                        );
                    });

                    this.$router.push({
                        path: "/searchdetail",
                        query: {
                            songs: JSON.stringify(res.data.result.songs)
                        }
                    });
                }
            );
        }
    }
};
</script>

<style lang="less" scoped>
.search {
    display: flex;
    align-items: center;
    border: 1px solid #d53803;
    background-color: #ec4141;
    border-radius: 30px;
    padding: 5px 15px;
    img {
        width: 16px;
        height: 16px;
        padding-right: 6px;
        cursor: pointer;
    }
    input {
        border: 0; // 去除未选中状态边框
        outline: none; // 去除选中状态边框
        background-color: #ec4141;
        color: #fff;
        font-size: 14px;
        &::placeholder {
            color: #fff;
            font-size: 14px;
        }
    }
}
</style>
